/**
 * 该文件是 webpack 的配置文件
 *    需要导出一个对象，对象中的选项就是按照文档做的配置
 *
 * 当我们在项目下运行 webpack 命令时，会自动加载该文件，用该文件中的内容来设置 webpack 的操作
 *
 * 如果我们期望本地开发与生产上线走不同的配置。可以创建多个配置文件，然后在运行 webpack 命令时 设置 -c 选项来指定配置文件
 *
 *    webpack -c ./webpack.config.dev.js
 *    webpack -c ./webpack.config.prod.js
 */

const path = require("path");
const json5 = require("json5");

module.exports = {
  // 构建模式
  //    1. 开发模式   development
  //    2. 生产模式   production    【默认值】
  mode: "development",
  // 入口配置
  entry: "./src/index.js",
  // 出口配置
  output: {
    // 最终生成的文件名
    filename: "bundle.js",
    // 路径
    path: path.resolve(__dirname, "dist"),
  },
  // 模块配置
  module: {
    // 模块解析规则配置
    rules: [
      {
        // 匹配某种类型的文件
        test: /\.css$/i,
        /**
         * 使用什么 loader 来处理 .css 文件
         *    PS: 数组的顺序有要求，一个倒序
         *
         *    css-loader: 让webpack支持解析 css 文件的一个loader
         *    style-loader: 将 css-loader 解析之后的内容，创建内联的 style 写入到页面中的 loader
         */
        use: ["style-loader", "css-loader"],
      },
      {
        // 当匹配加载的模块后缀名为 .png | .svg | .jpg | .jpeg | .gif 时，使用这条规则
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        /**
         * webpack5中新增的 Asset Modules 配置，可以直接处理图片资源
         *  "asset/resource"  : 类似之前的 file-loader
         *  "asset/inline"    : 类似之前的 url-loader，没有字节大小限制
         *  "asset/source"    : 类似之前的 raw-loader
         *  "asset"           : 类似设置了 limit 的 url-loader
         *                      小于 limit 限制的时候，使用 asset/inline
         *                      大于 limit 限制的时候，使用 asset/resource
         *
         * webpack5之前，可以使用 file-loader 来处理
         *    file-loader: 分发文件到output目录并返回相对路径
         *    url-loader: 和file-loader类似，但是当文件小于设定的limit时可以返回一个Data Url
         */
        // type: "asset/resource",
        // type: "asset/inline",
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024 * 1024, // 4kb 【默认为8kb】
          },
        },
        // use: "file-loader",
        // use: [
        //   {
        //     loader: "url-loader",
        //     options: {
        //       // 文件大小的限制字节，当文件大小小于 8192 字节时，不生成图片资源而是返回一个 Data Url
        //       limit: 81920000000,
        //     },
        //   },
        // ],
      },
      {
        test: /\.(csv|tsv)$/i,
        use: ["csv-loader"],
      },
      {
        test: /\.xml$/i,
        use: ["xml-loader"],
      },
      {
        test: /\.(json5|json)$/i,
        // 将它当成 json 文件来解析
        type: "json",
        parser: {
          parse: json5.parse,
        },
      },
    ],
  },
  // 解析配置
  resolve: {
    // 路径别名配置
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
};
